<template>
    <div class="home-banner">
        <el-carousel height="500px">
        <el-carousel-item v-for="item in bannerList" :key="(item as any).id">
            <img :src="(item as any).imgUrl" />
        </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script lang='ts' setup>
    import {getBannerAPI} from '@/api/home'
    import { ref,onMounted } from 'vue';

    const bannerList = ref([])
    const getBanner = async ()=>{
        const res = await getBannerAPI()
        bannerList.value = (res as any).result
    }
    onMounted(() => {
        getBanner()
    })  

</script>

<style lang="scss" scoped>
    .home-banner {
        width: 1240px;
        height: 500px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 98;

        img {
            width: 100%;
            height: 500px;
        }
    }
</style>